<template>
  <view class="new-file">   
    <!-- 第二种方法 -->
    <view class="head-nav">
      <!-- 头部选项卡 -->
     <view :class="listIndex==index?'activite':''" @click="checkListIndex(index)" v-for="(item,index) in navList" :key="index">{{item.name}}</view>
    </view>
    <!-- 内容 -->
    <view class="content">
       <view class="" v-if="listIndex==0">
				 <view class="content2" v-for="(item,index) in listL" :key="index">
					<view class="middle">
						<view class="flex">
							<p>{{item.text1}}</p>
							<p>{{item.text2}}</p>
						</view>
						<view class="zuo_you">
							<view class="flex">
								<view class="zuo1">
									<p><image :src="item.img" mode="" style="width:170rpx;height: 200rpx;"></image></p>
								</view>
								<view class="you1">
									<p>{{item.text3}}</p>
									<p>{{item.text4}}</p>
								</view>
							</view>
							<p>{{item.text5}} <span>{{item.text6}}</span> <span>{{item.text7}}</span> </p>
							<p class="btn"><button>{{item.text8}}</button></p>
							<p>{{item.text9}}</p>
						</view>
					</view>
					
				 </view>
				 <!-- listIndex==0 -->
				<!-- <view class="" v-if="listIndex1==1" >
				 	111
				 </view> -->
         <view class="head-nav">
             <!-- 选项卡二头部选项卡 -->
            <view :class="listIndex1==index?'activite':''"
						 @click="checkListIndex1(index)" v-for="(item,index) in navList1" :key="index">{{item.name}}</view>
         </view>
				 <view class="middle flex" v-if="listIndex1==0" v-for="(item,index) in list2" :key="index">
				 					 <view class="z1uo">
				 					 	<dl>
				 					 		<dt>
				 					 			<image :src="item.img" mode="" style="width: 320rpx;height: 320rpx;"></image>
				 					 			<dd>{{item.text}}</dd>
				 					 			<dd>{{item.text2}}</dd>
				 					 		</dt>
				 					 	</dl>
				 					 </view>
				 					 <view class="z2uo">
				 					 	<dl>
				 					 		<dt>
				 					 			<image :src="item.img" mode="" style="width: 320rpx;height: 320rpx;"></image>
				 					 			<dd>{{item.text}}</dd>
				 					 			<dd>{{item.text2}}</dd>
				 					 		</dt>
				 					 	</dl>
				 					 </view>
				 </view>
				 <view class="middle flex" v-if="listIndex1==1" v-for="(item,index) in list3" :key="index">
				 <view class="z1uo">
				 					<dl>
				 						<dt>
				 							<image :src="item.img" mode="" style="width: 320rpx;height: 320rpx;"></image>
				 							<dd>{{item.text}}</dd>
				 							<dd>{{item.text2}}</dd>
				 						</dt>
				 					</dl>
				 </view>
				 <view class="z2uo">
				 					<dl>
				 						<dt>
				 							<image :src="item.img" mode="" style="width: 320rpx;height: 320rpx;"></image>
				 							<dd>{{item.text}}</dd>
				 							<dd>{{item.text2}}</dd>
				 						</dt>
				 					</dl>
				 </view>
				 </view>
				 <view class="middle flex" v-if="listIndex1==2" v-for="(item,index) in list4" :key="index">
				 					 <view class="z1uo">
				 						<dl>
				 							<dt>
				 								<image :src="item.img" mode="" style="width: 320rpx;height: 320rpx;"></image>
				 								<dd>{{item.text}}</dd>
				 								<dd>{{item.text2}}</dd>
				 							</dt>
				 						</dl>
				 					 </view>
				 					 <view class="z2uo">
				 						<dl>
				 							<dt>
				 								<image :src="item.img" mode="" style="width: 320rpx;height: 320rpx;"></image>
				 								<dd>{{item.text}}</dd>
				 								<dd>{{item.text2}}</dd>
				 							</dt>
				 						</dl>
				 					 </view>
				 </view>
				 <view class="middle flex" v-if="listIndex1==3" v-for="(item,index) in list4" :key="index">
				 					 <view class="z1uo">
				 						<dl>
				 							<dt>
				 								<image :src="item.img" mode="" style="width: 320rpx;height: 320rpx;"></image>
				 								<dd>{{item.text}}</dd>
				 								<dd>{{item.text2}}</dd>
				 							</dt>
				 						</dl>
				 					 </view>
				 					 <view class="z2uo">
				 						<dl>
				 							<dt>
				 								<image :src="item.img" mode="" style="width: 320rpx;height: 320rpx;"></image>
				 								<dd>{{item.text}}</dd>
				 								<dd>{{item.text2}}</dd>
				 							</dt>
				 						</dl>
				 					 </view>
				 </view>
         </view>
				 <view class="" v-if="listIndex==1">
				 	<view class="flex">
				 		<view class="left_zuo2">
				 			<p class="jiaCu">不限</p>
							<p>上海 <span>今日限行</span> </p>
				 		</view>
						<view class="right_you2">
							<p class="number1">7.84￥/L <span>95#</span> </p>
							<p class="number2">￥0.00/L <span>10月25将调价</span> </p>
						</view>
				 	</view>
					<view class="head-nav flex2">
						<view :class="listIndex2==index?'activite':''" @click="checkListIndex2(index)" v-for="(item,index) in navList2" :key="index">{{item.name}}</view>
					</view>
					
					</view>
					<!-- 内容 -->
					<view class="content">
					   <view class="ddd" v-if="listIndex2==0" v-for="(item,index) in list5" @click="TiaoZ()">
							 <view class="overF">
							 	<view class="xinYi_zuo">
							 		<p><image :src="item.img" mode="" style="width: 150rpx;height: 100rpx;"></image></p>
							 	</view>
								<view class="xinYi_you">
									<p>{{item.text}}</p>
									<p> <span>{{item.text2}}</span> </p>
								</view>
							 </view>
					     <view class="biaoZ">
					     	<view class="biaoZhun flex">
					     		<view class="xiC">{{item.text3}}</view>
									<view class="flex"> <p class="three_five">{{item.text4}}</p> <p class="qiangG">{{item.text5}}</p></view>
					     	</view>
								<view class="biaoZhun flex">
									<view class="xiC">{{item.text3}}</view>
									<view class="flex"> <p class="three_five">{{item.text4}}</p> <p class="qiangG">{{item.text5}}</p></view>
								</view>
					     </view>
					   </view>
						 <view class="" v-if="listIndex2==1" v-for="(item,index) in list5">
							 <view class="overF">
							 	<view class="xinYi_zuo">
							 		<p><image :src="item.img" mode="" style="width: 150rpx;height: 100rpx;"></image></p>
							 	</view>
								<view class="xinYi_you">
									<p>{{item.text}}</p>
									<p> <span>{{item.text2}}</span> </p>
								</view>
							 </view>
					     <view class="biaoZ">
					     	<view class="biaoZhun flex">
					     		<view class="xiC">{{item.text3}}</view>
									<view class="flex"> <p class="three_five">{{item.text4}}</p> <p class="qiangG">{{item.text5}}</p></view>
					     	</view>
								<view class="biaoZhun flex">
									<view class="xiC">{{item.text3}}</view>
									<view class="flex"> <p class="three_five">{{item.text4}}</p> <p class="qiangG">{{item.text5}}</p></view>
								</view>
					     </view>
					   </view>
						<view class="" v-if="listIndex2==2" v-for="(item,index) in list5">
							 <view class="overF">
							 	<view class="xinYi_zuo">
							 		<p><image :src="item.img" mode="" style="width: 150rpx;height: 100rpx;"></image></p>
							 	</view>
								<view class="xinYi_you">
									<p>{{item.text}}</p>
									<p> <span>{{item.text2}}</span> </p>
								</view>
							 </view>
					     <view class="biaoZ">
					     	<view class="biaoZhun flex">
					     		<view class="xiC">{{item.text3}}</view>
									<view class="flex"> <p class="three_five">{{item.text4}}</p> <p class="qiangG">{{item.text5}}</p></view>
					     	</view>
								<view class="biaoZhun flex">
									<view class="xiC">{{item.text3}}</view>
									<view class="flex"> <p class="three_five">{{item.text4}}</p> <p class="qiangG">{{item.text5}}</p></view>
								</view>
					     </view>
					   </view>
					</view>
				 </view>
				 <!-- 选项卡二内容 -->
    </view>
  </view>
  
</template>

<script>
  export default{
    data(){
      return{
        navList:[{name:"团油推荐",id:'1'},{name:"省钱养车",id:'2'},{name:"车主商城",id:'3'}],
        listIndex:0,
				navList2:[{name:"全部",id:'1'},{name:"洗车",id:'2'},{name:"美容",id:'3'}],
				navList1:[{name:"好物上新",id:'1'},{name:"热销榜",id:'2'},{name:"车品相关",id:'3'},{name:"影视娱乐",id:'4'}],
				listIndex1:0,
				listIndex2:0,
				listL:[
					{
						text1:'加油金多宝',text2:'查看更多 >',img:'../../static/hushouShuang.png',
						text3:'德国小甘菊经典护手霜',text4:'满4500加油金开奖，进度76%',
						text5:'1',text6:'加油金',text7:'价值￥18',text8:'立即夺宝',img1:'',text9:'1742人参与'
					}
				],
				list2:[
					{text:'智能保温杯（LED温度显示）',text2:'5加油金',img:'../../static/baowen.png'},
					{text:'智能保温杯1（LED温度显示）',text2:'5加油金',img:'../../static/baowen.png'},
					{text:'智能保温杯2（LED温度显示）',text2:'5加油金',img:'../../static/baowen.png'},
					{text:'智能保温杯3（LED温度显示）',text2:'5加油金',img:'../../static/baowen.png'},
					{text:'智能保温杯4（LED温度显示）',text2:'5加油金',img:'../../static/baowen.png'},
					{text:'智能保温杯5（LED温度显示）',text2:'5加油金',img:'../../static/baowen.png'},
					{text:'智能保温杯6（LED温度显示）',text2:'5加油金',img:'../../static/baowen.png'},
					{text:'智能保温杯7（LED温度显示）',text2:'5加油金',img:'../../static/daizi.jpg'},
				],
				list3:[
					{text:'0元购车载收纳袋',text2:'5加油金',img:'../../static/daizi.jpg'},
					{text:'0元购车载收纳袋',text2:'5加油金',img:'../../static/daizi.jpg'},
					{text:'0元购车载收纳袋',text2:'5加油金',img:'../../static/daizi.jpg'},
					{text:'0元购车载收纳袋',text2:'5加油金',img:'../../static/daizi.jpg'},
					{text:'0元购车载收纳袋',text2:'5加油金',img:'../../static/daizi.jpg'},
					{text:'0元购车载收纳袋',text2:'5加油金',img:'../../static/daizi.jpg'},
					{text:'0元购车载收纳袋',text2:'5加油金',img:'../../static/daizi.jpg'},
					{text:'0元购车载收纳袋',text2:'5加油金',img:'../../static/daizi.jpg'},
				],
				list4:[
					{text:'0元购车载收纳袋',text2:'5加油金',img:'../../static/daizi.jpg'},
					{text:'0元购车载收纳袋',text2:'5加油金',img:'../../static/daizi.jpg'},
					{text:'0元购车载收纳袋',text2:'5加油金',img:'../../static/daizi.jpg'},
					{text:'0元购车载收纳袋',text2:'5加油金',img:'../../static/daizi.jpg'},
					{text:'0元购车载收纳袋',text2:'5加油金',img:'../../static/daizi.jpg'},
					{text:'0元购车载收纳袋',text2:'5加油金',img:'../../static/daizi.jpg'},
					{text:'0元购车载收纳袋',text2:'5加油金',img:'../../static/daizi.jpg'},
					{text:'0元购车载收纳袋',text2:'5加油金',img:'../../static/daizi.jpg'},
				],
				list5:[
					{text:'心意汽车服务',
					text2:'1.68km | 上海闸北区金源路327号',text3:'标准洗车-五座轿车', text4:'￥35',text5:'抢购',img:'../../static/c2.jpg'},
					{text:'心意汽车服务',
					text2:'1.68km | 上海闸北区金源路327号',text3:'标准洗车-五座轿车', text4:'￥35',text5:'抢购',img:'../../static/c2.jpg'},
					{text:'心意汽车服务',
					text2:'1.68km | 上海闸北区金源路327号',text3:'标准洗车-五座轿车', text4:'￥35',text5:'抢购',img:'../../static/c2.jpg'},
					{text:'心意汽车服务',
					text2:'1.68km | 上海闸北区金源路327号',text3:'标准洗车-五座轿车', text4:'￥35',text5:'抢购',img:'../../static/c2.jpg'},
					{text:'心意汽车服务',
					text2:'1.68km | 上海闸北区金源路327号',text3:'标准洗车-五座轿车', text4:'￥35',text5:'抢购',img:'../../static/c2.jpg'},
					{text:'心意汽车服务',
					text2:'1.68km | 上海闸北区金源路327号',text3:'标准洗车-五座轿车', text4:'￥35',text5:'抢购',img:'../../static/c2.jpg'},
					{text:'心意汽车服务',
					text2:'1.68km | 上海闸北区金源路327号',text3:'标准洗车-五座轿车', text4:'￥35',text5:'抢购',img:'../../static/c2.jpg'},
				]
				
      }
    },
    methods:{
      checkListIndex(index){
        this.listIndex=index;
      },
			checkListIndex1(index){
			  this.listIndex1=index;
			},
			checkListIndex2(index){
			  this.listIndex2=index;
			},
			TiaoZ(){
				uni.navigateTo({
					url:'/pages/me/shangCthree'
				})
			}
    }
  }
</script>

<style scoped>
	.new-file{width: 90%;margin: 0 auto;}
	.flex{display: flex;justify-content: space-between;}
  .head-nav{
		margin: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .activite{
    font-weight: bold;
    border-bottom: 6rpx solid #0065d9;
  }
  .head-nav>view{
    padding-bottom: 10rpx;
  }
  .box{background: #008000;}
	.btn button{width: 55%;}
	.z1uo dd{font-size: 25rpx;}
	.z2uo dd{font-size: 25rpx;}
	.left_zuo2{width: 40%;}
	.right_you2{width: 40%;}
	.jiaCu{font-size: 60rpx;font-weight: bold;}
	.number1{font-size: 35rpx;margin-bottom: 40rpx;}
	.number2{font-size: 20rpx;text-indent: 2em;}
	.overF{overflow: hidden;}
	.xinYi_zuo{float: left;}
	.xinYi_you{float: right;}
	.xiC{margin: 20rpx 0;}
	.qiangG{width: 160rpx;background-color: #0065d9;height: 40rpx;padding: 10rpx 0; text-align: center;border-radius: 160rpx;}
	.three_five{line-height: 60rpx;color: red;font-size: 35rpx;}
	.ddd{background-color: #fff;margin: 20rpx 0;padding: 30rpx 20rpx;border-radius: 15rpx;}
</style>